<template>
	<view class="product-item-area" @click="openProduct">
		<view class="row">
			<image :src="info.image" mode="scaleToFill" class="product-logo-tow"></image>
			<view class="flex-1 ml20 info">
				<view class="md line1 title">{{info.title||''}}</view>
				<view class="row">
					<view class="lable xxs" v-if="info.annual_interest_rate">
						{{info.annual_interest_rate||''}}
					</view>
					<view class="lable xxs u-margin-left-16" v-if="info.mode_repayment">
						{{info.mode_repayment||''}}
					</view>
				</view>
			</view>
		</view>
		<view class="u-flex u-flex-wrap mt20" v-if="info.scope_credit || info.settlement_interval || info.allotted_time">
			<view class="u-flex-1 u-padding-right-10" v-if="info.scope_credit">
				<view class="u-flex-baseline u-line-1">
					<text class="xxl orange u-line-1 din-font">{{info.scope_credit||''}}</text>
					<text class="xs gray u-padding-left-5">万</text>
				</view>
				<view class="xs gray">最高额度</view>
			</view>
			<view class="u-flex-1 u-padding-right-10" v-if="info.settlement_interval">
				<view class="u-flex-baseline">
					<text class="xxl orange u-line-1 din-font">{{info.settlement_interval||''}}</text>
					<text class="xs gray u-padding-left-5">天</text>
				</view>
				<view class="xs gray">结算周期</view>
			</view>
			<view class="u-flex-1" v-if="info.allotted_time">
				<view class="u-flex-baseline">
					<text class="xxl orange u-line-1 din-font">{{info.allotted_time||''}}</text>
					<text class="xs gray u-padding-left-5">期</text>
				</view>
				<view class="xs gray">贷款期数</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUser
	} from '@/api/user';
	export default {
		props: {
			info: {
				type: Object,
				default:()=>{
					return{}
				}
			}
		},
		methods:{
			isURL(url) {
			
				const strRegex = '^((https|http|ftp)://)?' //(https或http或ftp):// 可有可无
					+
					'(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无
					+
					'(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
					+
					'|' // 允许IP和DOMAIN（域名）
					+
					'(localhost)|' //匹配localhost
					+
					'([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
					+
					'\\w+\\.' // 一级域名 -英文或数字 加上.
					+
					'[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
					+
					'(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
					+
					'((/?)|' // url无参数结尾 - 斜杆或这没有
					+
					'(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$'; //请求参数结尾- 英文或数字和[]内的各种字符
				const re = new RegExp(strRegex, 'i'); // 大小写不敏感
				if (re.test(encodeURI(url))) {
					return true;
				}
				return false;
			},
			async openProduct(){
				if(this.info.type == 0){
					let {
						data,
						code
					} = await getUser()
					if (code == 1) {
						if (data.is_vip == 0) {
							this.$emit('showBuyVip');
							return false
						}
					}else{
						this.$emit('errorToast','系统错误，请稍后重试');
					}
				}
				
				if (this.info.open_type == 1 || this.info.open_type == 3) {
					uni.navigateTo({
						url: this.info.url
					})
				} else if (this.info.open_type == 2) {
					if (this.isURL(this.info.url)) {
						// #ifdef APP || MP-WEIXIN 
						uni.navigateTo({
							url: "/pages/webview/webview?url=" + this.info.url,
						});
						// #endif
						// #ifndef APP || MP-WEIXIN
						window.location.href = this.info.url;
						// #endif
					} else {
						uni.navigateTo({
							url: this.info.url,
							fail(e) {
								console.log(e)
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.product-item-area{
		padding: 32rpx 0 16rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, .05);
		
		.product-logo{
			width: 120rpx;
			height: 120rpx;
			border-radius: 20rpx;
		}
		
		.product-logo-tow{
			width: 90rpx;
			height: 90rpx;
			border-radius: 20rpx;
		}
		
		.info{
			width: calc(100% - 130rpx);
		}
		.lable{
			margin: 8rpx 0;
			padding: 4rpx 12rpx;
			color: #0F7EFC;
			font-weight: 400;
			background: #E9F3F7;
			border-radius: 5rpx;
			display: inline-block;
			border-radius: 20rpx;
		}
		
		.orange{
			color: #FF8000;
		}
		
		.gray{
			color: #939599;
		}
		
		.u-flex-baseline{
			display: flex;
			flex-direction: row;
			align-items: baseline;
		}
		
		.u-flex-1{
			width: calc(100% / 3);
		}
	}
</style>